<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view>
			<ms-tabs :list="list2" v-model="active2" :lineAnimated="false"></ms-tabs>
		</view>
		<view>
			<view class="flowing">
				<view class="flowing-li" v-for="(item,index) in 5">
					<view class="li-top">
						<view class="li-top-left">全国漫游 1500G*1个月</view>
					</view>
					<view class="li-btm">
						<view class="li-btm-left">生效时间: 202-03-14至2025-04-13</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",
				list2: [{
					title: '当前套餐'
				}, {
					title: '历史套餐'
				}],
				active2: 0
			}
		},
		watch: {
			active2() {
				console.log(this.active2) // 0
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
		},
		methods: {
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #F5F4F9;
	}
.flowing{
		padding: 25rpx;
	}
	.flowing-li{
		padding: 25rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 25rpx;
	}
	.li-top{
		display: flex;
		flex-wrap: nowrap;
		justify-content:space-between;
	}
	.li-top-left{
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
	}
	.li-top-right{
		font-size: 32rpx;
		font-weight: 600;
		color: #449CEC;
	}
	.li-btm{
		display: flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		padding-top: 15rpx;
	}
	.li-btm-left{
		font-size: 28rpx;
	}
	.li-btm-rig{
		font-size: 30rpx;
	}
	@import url("@/pages/css.css");
</style>